<template>
    <view>
        <image :src="obj.img" mode="aspectFill" class="img">
        </image>
        <div class="view">
            <div class="info">
                <span style="font-weight: bold;">{{ obj.title }} {{ obj.city }}</span><br>
                <span style="color: rgb(44, 45, 46);font-size: 14px;">活动时间： {{ obj.opentime | date }}</span><br>
                <span style="color: rgb(44, 45, 46);font-size: 14px;">公里数： {{ obj.km }}km</span><br>
                <span style="color: rgb(132, 133, 134);font-size: 14px;">活动地点： {{ obj.address }}</span>

            </div>
            <div class="herder">
                <div class="info_obj" v-for="item in list" v-if="item.flow != null">
                    <span style="font-weight: bold;display: block;width: 100%;background-color: #51dfd3;margin-top: 15rpx;">
                        活动流程</span>
                    <div v-html="s"></div>
                </div>
                <div class="info_obj" v-for="item in list" v-if="item.prompt != null">
                    <span style="font-weight: bold;display: block;width: 100%;background-color: #51dfd3;margin-top: 15rpx;">
                        注意事项</span>
                    <span>{{ item.prompt }}</span>
                </div>
                <div class="info_obj" v-for="item in list" v-if="item.img">
                    <span>
                        <image :src="item.img" class="img_info" :mode="aspectFill">
                        </image>
                        <!-- <img :src="baseAPI + item.img" class="img_info" /> -->
                    </span>
                </div>
                <div class="info_obj" v-for="item in list" v-if="item.miaoshu != null">
                    <span style="font-weight: bold;display: block;width: 100%;background-color: #51dfd3;margin-top: 15rpx;">
                        温馨提示</span>
                    <span>{{ item.miaoshu }}</span>
                </div>
            </div>
            <van-submit-bar :button-text="obj.state" @submit="onSubmit(obj.id)" v-if="obj.state != '已结束' && !iscj" />
            <van-submit-bar :button-text="obj.state" disabled v-if="obj.state == '已结束'" />
            <van-submit-bar button-text="已报名" v-if="iscj" />
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: '',
            title: 'asdasdasd',
            showTitle: false,
            statusBarHeight: 20, // 如果不是全局设置StatusBar高度，请在当前页面定义该值，或转调getSystemInfo获取
            scrollTop: 0, // 页面已滚动的高度
            obj: "",
            s: '',
            cjlist: [],
            iscj: false
        }
    },
    onShow() {
        this.getactivity_obj()
        this.checkAuth()
        this.getcjlist()
    },

    // onPageScroll(e) {
    //     console.log(e);
    //     if (e.scrollTop > this.statusBarHeight) {
    //         uni.setNavigationBarTitle({
    //             title: this.title
    //         })
    //         uni.hideNavigationBarLoading() // 隐藏状态栏
    //         this.showTitle = true
    //     } else {
    //         uni.setNavigationBarTitle({
    //             title: ''
    //         })
    //         this.showTitle = false
    //     }
    // },
    onLoad(query) {
        this.obj = JSON.parse(decodeURIComponent(query.obj));
        console.log('路由传参：', this.obj);
    },

    methods: {
        //
        getactivity_obj() {
            this.request({
                url: `/activity_config/activity_obj/${this.obj.id}`,
                method: "get",
            }).then((res) => {
                this.list = res.data.data;
                console.log("activity_obj", this.list);
                this.list.map(obj => {
                    if (obj.flow != null) {
                        this.s = obj.flow.replace(/ /g, "<br>");
                    }
                })
            });
        },
        getcjlist() {
            this.request({
                url: "/my/activity/activity_bm_list",
                method: "get",
            }).then((res) => {
                this.cjlist = res.data.data;
                console.log("报名数据列表", this.cjlist);
                console.log(this.obj.id);
                this.cjlist.map(res => {
                    if (res.bm_id == this.obj.id) {
                        this.iscj = true
                    }
                })
            });
        },
        onSubmit(id) {
            this.request({
                url: '/my/activity/activity_obj_bm',
                method: "post",
                data: { bm_id: id }
            }).then((res) => {
                console.log("报名", res);
                this.getactivity_obj()
                this.getcjlist()
                uni.showToast({
                    title: '报名成功',
                    icon: 'none',
                    duration: 2000
                })
            });
        }
    }
}
</script>


<style scoped lang="scss">
.view {
    margin: 30rpx;
}

.info {
    height: 185rpx;

    border-bottom: 1px solid rgb(78, 77, 77);
}

.img {
    width: 100%;
}

.img_info {
    /* width: 100%; */
    height: 2000rpx;
    width: 100%;
    /* object-fit: cover; */
    /* object-fit: contain; */
}



.herder {
    margin: 20rpx 0;
}

.view ::v-deep .van-submit-bar__button {
    margin-right: 34%;
}
</style>